<template>
  <div class style="width:100%;height:100%;padding: 15px;position:relative;">
    <div id="acontainer" style="width:100%;height:100%;"></div>
    <div class="popdiv" :style="popsty" v-if="showpop">
      <el-row>
        <el-col :span="12">{{devdetail.name}}</el-col>
        <el-col :span="12" style="text-align:right;">
          <span style="color: #2FD7A4;">{{devdetail.status}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">所属高速&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.below}}</el-col>
        <el-col :span="12" style="text-align:right;">接入车道&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.linenum}}个</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          CPU状态&nbsp;&nbsp;&nbsp;&nbsp;
          <span style="color: #2FD7A4;">{{devdetail.CPU}}</span>
        </el-col>
        <el-col :span="0"></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import position from "../json/tollposition.js";
import AMap from "AMap";

export default {
  components: {},
  data() {
    return {
      amap: {},
      devdetail: {
        name: "加载中...",
        status: "在线",
        below: "渝蓉高速",
        net: "在线",
        pino: "ZK10+20"
      },
      showpop: false,
      popsty: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initdata();
  },
  methods: {
    initdata() {
      let _this = this;

      let amap = new AMap.Map("acontainer", {
        pitch: 55, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: "3D", // 地图模式
        center: [105.691152, 29.987148],
        zoom: 9
      });

      this.amap = amap;

      amap.on('click', function(ev) {
        _this.showpop = false
      })
      amap.on('mapmove', function(ev) {
        _this.showpop = false
      })

      amap.setMapStyle("amap://styles/bd1436e18624470e8df880b1f5733142");

      let iconon = "/icon/tollGate1.png";
//    let iconoff = "/icon/mj-off.png";

      position.map(item => {
        item.devlist.map(tunnelitem => {
          var marker = new AMap.Marker({
            position: new AMap.LngLat(
              tunnelitem.position[0],
              tunnelitem.position[1]
            ),
            offset: new AMap.Pixel(-10, -10),
            icon: Math.random() > 0.5 ? iconon : iconon, // 添加 Icon 图标 URL
            title: tunnelitem.name
          });
          marker.tunnelitem = tunnelitem;
          marker.on("click", this.markerclick.bind(tunnelitem));
          marker.on("mouseover", function() {
            // _this.$message.success(tunnelitem.name);
          });
          amap.add(marker);
        });
      });
    },
    markerclick(e) {
    	console.log(e.target);
      this.popsty =
        "top:" + (e.pixel.y - 50) + "px;left:" + (e.pixel.x + 40) + "px;";
      this.devdetail.name = e.target.tunnelitem.name;
      this.devdetail.linenum=e.target.tunnelitem.linenum;
      this.devdetail.CPU=e.target.tunnelitem.CPU;
      this.showpop = false;
      this.$nextTick(function() {
        this.showpop = true;
      });
    },
    initmap() {},
    initdev() {}
  }
};
</script>
<style lang='scss' >
.popdiv {
  font-size: 15px;
  background-color: #2a3b81;
  padding: 10px;
  color: white;
  position: absolute;
  width: 300px;
  height: 100px;
  z-index: 100;
  .el-row {
    margin: 10px 0;
  }
}
.amap-logo {
  display: none !important;
  opacity: 0 !important;
}
.amap-copyright {
  display: none !important;
  opacity: 0 !important;
}

.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}
</style>